<template>
  <el-dialog
    v-if="open"
    :title="title"
    v-model="open"
    draggable
    width="70%"
    :close-on-click-modal="false"
    append-to-body
    :before-close="cancel"
  >
    <div class="dialog-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="80px"
      >
        <el-form-item label="工厂" prop="factory">
          <el-select
            v-model="queryParams.factory"
            placeholder="请选择工厂"
            style="width: 240px"
            clearable filterable
            @change="handleSearchListChange('factory')"
          >
            <el-option
              v-for="(item, index) in factoryOptions"
              :key="index"
              :label="item.deptName"
              :value="item.deptCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工段名称" prop="workSection">
          <el-select
            v-model="queryParams.workSection"
            placeholder="请选择工段名称"
            style="width: 240px"
            clearable filterable
            @change="handleSearchListChange('workSection')"
          >
            <el-option
              v-for="(item, index) in workshopOptions"
              :key="index"
              :label="item.deptName"
              :value="item.deptCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号" prop="orderCode">
          <el-input
            v-model="queryParams.orderCode"
            placeholder="请输入订单编号"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="产品编号" prop="prodCode">
          <el-input
            v-model="queryParams.prodCode"
            placeholder="请输入产品编号"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="产品名称" prop="prodName">
          <el-input
            v-model="queryParams.prodName"
            placeholder="请输入产品名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="来源" prop="source">
        <el-select
          v-model="queryParams.source"
          placeholder="请选择来源"
          clearable filterable
          style="width: 240px"
        >
          <el-option
            v-for="(item, index) in order_source"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="queryParams.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 240px"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="typeList"
        border
        @selection-change="handleSelectionChange"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="订单编号" prop="orderCode" />
        <el-table-column label="产品编号" prop="prodCode" />
        <el-table-column label="产品名称" prop="prodName" />
        <el-table-column label="计划产量" prop="planNumber" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="计划开始时间" prop="planStartTime">
          <template #default="scope">
            <span>{{ scope.row.planStartTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计划结束时间" prop="planEndTime">
          <template #default="scope">
            <span>{{ scope.row.planEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工厂" prop="factoryName" />
        <el-table-column label="工段" prop="workShopName" />
        <el-table-column label="来源" prop="source"
            ><template #default="scope">
              <dict-tag :options="order_source" :value="scope.row.source" />
            </template>
          </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="UserSelect">
import { toRefs } from "vue";

import { getFactoryTree, depeIdSelectList } from "@/api/system/dept";

import { listOrder } from "@/api/base/workOrder/order";

const { proxy } = getCurrentInstance();
const props = defineProps(["placeholder", "title", "multiple", "openOrder"]);
const { title, multiple, openOrder } = toRefs(props);
const emit = defineEmits(["change"]);
const userList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);

const total = ref(0);
const selectData = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
const currentRow = ref();
const selectName = defineModel();
const selectValue = defineModel("code");
var factoryOptions = ref([]);
var workshopOptions = ref([]);
const { order_source } = proxy.useDict("order_source");
const typeList = ref([
  {
    id: 1,
    planCode: "CS001",
  },
]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status:'progressing',
    userName: undefined,
    phonenumber: undefined,
    deptCode: undefined,
  },
});

const { queryParams } = toRefs(data);

watch(openOrder, (val) => {
  console.log(val, "=====openOrder");
  open.value = val;
  getList();
  getFactorys();
});

const handleCurrentChange = (val) => {
  selectData.value=[]
  selectData.value.push(val);
};
function handleSearchListChange(type) {
  if (type == "factory") {
    depeIdSelectList({
      deptType: "station",
      deptCode: queryParams.value.factory,
    }).then((res) => {
      workshopOptions.value = res.data;
      // lineOptions.value = [];
      // processOptions.value = [];
      queryParams.value.workSection = "";
      queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
  if (type == "workSection") {
    depeIdSelectList({
      deptType: "line",
      deptCode: queryParams.value.workSection,
    }).then((res) => {
      // lineOptions.value = res.data;
      // processOptions.value = [];
      queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
}

function getList() {
  loading.value = true;
  let newForm = JSON.parse(JSON.stringify(queryParams.value));
  if (queryParams.value?.date?.length) {
    newForm.planStartTime = queryParams.value.date[0]+' 00:00:00';
    newForm.planEndTime = queryParams.value.date[1]+' 59:59:59';
    delete newForm.date;
  }
  listOrder(proxy.addDateRange(newForm)).then((response) => {
    typeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function getFactorys(query) {
  getFactoryTree(query).then((res) => {
    factoryOptions.value = res.data;
  });
}

function submitForm() {
  console.log(multiple.value, "===");
  if (selectData.value?.length && selectData.value.length == 1) {
    emit("changeList", selectData.value);
  } else {
    proxy.$modal.msgError("请选择一条生产订单！");
  }
  // if (!multiple.value) {
  //   selectName.value = currentRow.value.nickName;
  //   selectValue.value = currentRow.value.userId;
  //   open.value = false;
  //   emit("changeList", { name: selectName.value, id: selectValue.value });
  //   return;
  // }
  // selectName.value = selectData.value.join(",");
  // selectValue.value = ids.value.join(",");
  // open.value = false;
  // emit("changeList", { name: selectName.value, id: selectValue.value });
}
function cancel() {
  emit("changeList",[]);
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 选择条数  */
function handleSelectionChange(selection) {
  selectData.value = selection;
  console.log(selectData.value, "=======asasasasasa====");
}

</script>
